<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>发送消息:</div>
<input type="text" id="msgContent"/>
<input type="button" value="发送" onclick="CHAT.chat()"/>
<div>接收消息:</div>
<div id="receiveMsg" style="background-color: darkgray">

</div>

<script type="application/javascript">

    window.CHAT = {
        socket: null,
        init: function () {
            if (!window.WebSocket) {
                alert("当前浏览器不支持web socket协议")
            } else {
                CHAT.socket = new WebSocket("ws://127.0.0.1:8080/ws");
                CHAT.socket.onopen = function () {
                    console.log("与服务器连接建立成功")
                }, CHAT.socket.onclose = function () {
                    console.log("与服务器连接断开")
                }, CHAT.socket.onerror = function () {
                    console.log("与服务器连接出现异常")
                }, CHAT.socket.onmessage = function (msg) {
                    console.log("接收到消息:" + msg.data);
                    var receiveMsg = document.getElementById("receiveMsg");
                    var html = receiveMsg.innerHTML;
                    receiveMsg.innerHTML = html+msg.data+"<br/>"
                }

            }
        },
        chat: function () {

            console.log("连接状态: "+CHAT.socket.readyState);
            var msg = document.getElementById("msgContent");
            CHAT.socket.send(msg.value)
        }

    };
    CHAT.init();


</script>
</body>
</html>